<script setup>
import { computed, useSlots, provide, reactive, watch } from "vue";

const state = reactive({
  selectedIndex: null,
  count: 0
});

provide("tabsProvider", state)

const props = defineProps({
  modelValue: String,
})
const slots = useSlots();
const tabs = computed(() => {
  return slots.default().map((tab) => tab.props);
});
const emit = defineEmits(["input"])

function selectTab(i) {
  // state.selectedIndex = i;
  emit("input", i)
}

watch(() => props.modelValue, (to) => {
  state.selectedIndex = to
})
</script>

<template>
  <div class="tabs-wrapper">
    <ul class="tabs-labels">
      <li v-for="(label, i) in tabs" :key="label.name" @click="selectTab(label.name)"
        :class="{ active: state.selectedIndex == label.name }">
        {{
    label.label
        }}</li>
    </ul>
    <div class="contents">
      <slot></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.tabs-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tabs-labels {
  display: flex;
  list-style: none;
  padding-inline-start: 0;
  border-bottom: 1px solid #ddd;

  li {
    padding: 10px;

    &.active {
      border-bottom: 3px solid var(--logcat-primary-color);
      margin-bottom: -2px;
    }
  }
}

.contents {
  flex: 1;
  display: flex;
  background: #f6f6f6;
}
</style>